<!-- 基础：2、Vue实例 实例声明周期 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：2、Vue实例 实例声明周期</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<p>{{ a }}</p>
	</div>

	<script type="text/javascript">
	    // 建议照着生命周期图示观看，加深理解
		var vm = new Vue({
			el: '#app',
			data: {
				a: 1
			},
			// 在vue实例化配置数据观测之前被调用
			beforeCreate: function(){
				console.log('beforeCreate');
				console.log(this.a);   // 这个阶段还没载入data数据，所以输出是undefined
			},
			// 这是在数据观测（data observer）被配置之后所触发的钩子
			created: function(){
				// this 指向 vm实例
				console.log('a is ' + this.a)
			},
			/**
			 * 假如实例化选项中没有el，则这几个钩子不会被触发
			 */
			// 创建vm.$el并且用它来替代“el”之前所处阶段触发钩子，mount就是组装的意思
			beforeMount: function(){
				console.log('beforeMount');
			},
			mounted: function(){
				console.log('mounted');
				this.a = 2;        // 在这里改变数据，能触发beforeUpdate()和updated()钩子
			},
			/**
			 * 当数据发生改变，触发下面的钩子
			 */
			beforeUpdate: function(){
				console.log('before data changes,a = '+this.a);
			},
			updated: function(){
				console.log('after data changes,a = '+this.a);
			},
			/**
			 * 当vm.$destroy()被调用时，触发下面的钩子			 
			 */
			beforeDestory: function(){
				console.log('beforeDestory');
			},
			destroyed: function(){
				console.log('vm has been destroyed!');
			}
		})

		vm.$destroy();    // 调用这个实例方法后，钩子beforeUpdate的输出没有了。这说明在mounted之后这个Vue实例已经实例化成功了，所以能被摧毁
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->